<template>
  <section>
     
    <!-- 面包屑 -->
     <breadcrumbs></breadcrumbs>
    <div class="top-box">
      <span class="top-item"><img src="../../assets/images/leijidingdanshu.png" alt="" class="top-icon">
        <div class="right-item-box">
          <p><span class="fontTop">{{xianshidata.orderNumSum}}</span><br>
            <span class="fontText">累计订单数（个）</span>
          </p>
        </div>
      </span>
      <span class="top-item"><img src="../../assets/images/daifahuo.png" alt="" class="top-icon">
        <div class="right-item-box">
          <p><span class="fontTop">{{xianshidata.orderNumByState1}}</span><br>
            <span class="fontText">待发货数（个）</span>
          </p>
        </div>
      </span>
      <span class="top-item"><img src="../../assets/images/yifahuo.png" alt="" class="top-icon">
        <div class="right-item-box">
          <p><span class="fontTop">{{xianshidata.orderNumByState2}}</span><br>
            <span class="fontText">已发货数（个）</span>
          </p>
        </div>
      </span>
      <span class="top-item"><img src="../../assets/images/yiwancheng.png" alt="" class="top-icon">
        <div class="right-item-box">
          <p><span class="fontTop">{{xianshidata.orderNumByState3}}</span><br>
            <span class="fontText">已完成数（个）</span>
          </p>
        </div>
      </span>
      <!-- <el-button type="primary" @click="addhouse">新增运营中心</el-button> -->
    </div>
    <!-- 查询条件 -->
    <el-form ref="searchForm" :model="searchForm" label-width="100px" inline class="demo-form-inline" size='small' style="border-bottom: 1px solid #f6f6f6;">
      <el-form-item label="订单状态" prop="orderState">
        <el-select v-model="searchForm.orderState" clearable placeholder="请选择">
          <!-- <el-option label="待支付" value="1"></el-option> -->
          <el-option label="待发货" value="1"></el-option>
          <el-option label="待取货" value="2"></el-option>
          <el-option label="完成" value="3"></el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="兑换时间" prop="date">
        <el-date-picker v-model="searchForm.date" type="daterange" range-separator="至" start-placeholder="开始日期" end-placeholder="结束日期">
        </el-date-picker>
      </el-form-item>
      <el-form-item label="订单号" prop="orderNo">
        <el-input v-model="searchForm.orderNo" placeholder="请输入订单号"></el-input>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="searchForm.current = 1;search()">查询</el-button>
        <el-button @click="handleReset">重置</el-button>
      </el-form-item>
    </el-form>
    <btns @exec="exec"></btns>
    <div class="data-container scroll-table">
      <div>
        <div class="ind-title lh50 f16">订单列表</div>
      </div>
      <el-table :data="tableData" style="width: 100%" row-key="ifId" border lazy :tree-props="{children: 'children', hasChildren: 'hasChildren'}">
        <el-table-column prop="orderNo" label="订单号" width="160">
        </el-table-column>
        <el-table-column prop="pickupName" label="收货人">
        </el-table-column>
        <el-table-column prop="pickupPhone" label="联系电话" width="100">
        </el-table-column>
        <el-table-column prop="pickupAddress" label="收货地址" width="150">
        </el-table-column>
        <el-table-column prop="orderStatus" label="订单状态">
          <template slot-scope="scope">
            <span>{{orderStatus[scope.row.orderStatus]}}</span>
          </template>
        </el-table-column>
        <el-table-column prop="addTime" label="兑换时间">
        </el-table-column>
        <el-table-column prop="deliverTime" label="发货时间">
        </el-table-column>
        <!-- <el-table-column prop="shipName" label="处理管理员">
                </el-table-column> -->
        <el-table-column prop="expressNum" label="物流单号">
        </el-table-column>
        <el-table-column fixed="right" label="操作" width="100">
          <template slot-scope="scope">
            <div>
              <el-link type="primary" v-if="scope.row.orderStatus==3 || scope.row.orderStatus==2" @click="goInfo(scope.row)">查看</el-link>
              <el-link v-if="scope.row.orderStatus==1" type="primary">
                 <a :href="xiazai(scope.row)">下载发货单</a>

              </el-link>
            </div>
            <div>
              <el-link v-if="scope.row.orderStatus==1" type="primary" @click="goInfo(scope.row)">发货</el-link>
            </div>
            <div>
              <div v-if="scope.row.orderStatus==2" type="primary" @click="comp(scope.row)">完成订单</div>
            </div>
          </template>
        </el-table-column>
      </el-table>
      <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page="currentPage" :page-sizes="[5, 10, 15, 20]"
                     :page-size="pageSize" layout="total, sizes, prev, pager, next, jumper" :total="total">
      </el-pagination>
    </div>
    <el-dialog title="查看详情" :visible.sync="dialogVisible" width="50%">

      <div>
        <el-divider content-position="left">
          <span class="f18">订单信息</span>
        </el-divider>
        <el-row class="mgb-20">
          <el-col :span="12">
            <span>订单状态：</span>
            <span class="">{{orderStatus[integralOrder.orderStatus]}}</span>
          </el-col>
        </el-row>
        <el-row class="mgb-20">
          <el-col :span="12">订单号：{{integralOrder.orderNo}}</el-col>
          <el-col :span="12">兑换时间：{{integralOrder.addTime}}</el-col>
        </el-row>
        <el-row class="mgb-20">
          <el-col :span="12">支付时间：{{integralOrder.addTime}}</el-col>
          <el-col :span="12" v-if="integralOrder.orderIntegral>0||integralOrder.orderPrice>0">
            <span>支付总金额：</span>
            <span v-if="integralOrder.orderIntegral>0">{{integralOrder.orderIntegral}}积分</span>
            <span v-if="integralOrder.orderPrice>0">{{integralOrder.orderPrice}}元</span>
          </el-col>
        </el-row>
        <el-row class="mgb-20">
          <el-col :span="12">收货人：{{integralOrder.pickupName}}</el-col>
          <el-col :span="12">联系电话：{{integralOrder.pickupPhone}}</el-col>
        </el-row>
        <el-row class="mgb-20">
          <el-col :span="24">收货地址：{{integralOrder.pickupAddress}}</el-col>
        </el-row>
        <el-row class="mgb-20">
          <el-col :span="12">配送方式：到付</el-col>
        </el-row>

        <el-row class="mgb-20" v-if="integralOrder.expressCompany||integralOrder.expressNum">
          <el-col :span="12" v-if="integralOrder.expressCompany">物流公司：{{integralOrder.expressCompany}}</el-col>
          <el-col :span="12" v-if="integralOrder.expressNum">物流单号：{{integralOrder.expressNum}}</el-col>
        </el-row>
        <el-divider content-position="left">
          <span class="f18">兑换商品信息</span>
        </el-divider>
        <el-table :data="cjbintegralGoods" border style="width: 100%">
          <!-- <el-table-column prop="goodsCover" label="图片">
                        <template slot-scope="scope">
                            <el-image style="width: 80px;" :src="ossUri(scope.row.goodsCover)" fit="contain"></el-image>
                        </template>
                    </el-table-column> -->
          <el-table-column prop="goodsName" label="商品">
          </el-table-column>
          <el-table-column prop="goodsIntegral" label="单价">
            <template slot-scope="scope">
              <span v-if="scope.row.goodsIntegral>0">{{scope.row.goodsIntegral}}积分</span>
              <!-- <span v-if="scope.row.goodsPrice>0">{{scope.row.goodsPrice}}元；</span> -->
            </template>
          </el-table-column>
          <el-table-column prop="orderGoodsNum" label="兑换数量">
          </el-table-column>
        </el-table>

      </div>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogVisible = false">关 闭</el-button>
        <el-button type="primary" @click="orderShip(studentInfo)" v-if="integralOrder.orderStatus==1">确认发货</el-button>
      </div>
    </el-dialog>
    <el-dialog title="确认发货" :visible.sync="dialogShipVisible" width="40%">
      <el-form label-width="80px" :rules="rules">
        <el-form-item label="物流单号" prop="expressNum">
          <el-input v-model="expressNum" placeholder="请输入物流单号"></el-input>
        </el-form-item>
      </el-form>
      <!-- <el-form :model="shipForm" label-width="80px" :rules="rules" ref="shipForm">  -->
      <!-- <el-form-item label="物流公司" prop="expressId">
                    <el-select v-model="shipForm.expressId" filterable placeholder="请选择">
                        <el-option v-for="e in expressListData" :label="e.expressName" :value="e.expressId" :key="e.expressId"></el-option>
                    </el-select>
                </el-form-item> -->

      <!-- </el-form> -->
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogShipVisible = false">取 消</el-button>
        <el-button type="primary" @click="shipSub()">确 定</el-button>
      </div>
    </el-dialog>
  </section>
</template>
<style>
</style>
<script>
import mixins from '@/utils/mixins'
import btns from '@/components/btns.vue'
import breadcrumbs from "@/components/breadcrumbs.vue";

export default {
  mixins: [mixins],
  components: {
    btns,
    breadcrumbs,
  },
  data() {
    return {
      expressNum: "",
      orderStatus: {

        1: '待发货',
        2: '待取货',
        3: '完成',
      },
      searchForm: {
        date: [],
        title: "",
        endTime: "",
        beginTime: "",
        current: 1,
        size: 10,
        totalCount: "",
        orderNo: '',
        orderState: '',
      },
      importFileUrl: this.GLOBAL.pdfBaseUrl,
      cjbname: "",
      integralOrder: [],
      integralGoods: [],
      cjbintegralGoods: [],
      tableData: [],
      currentPage: 1,
      pageSize: 10,
      total: 0,
      xianshidata: [],
      shangpindata: [],
      tableData: [],
      dialogVisible: false,
      orderInfo: {

      },
      dialogShipVisible: false,
      expressListData: [],
      shipForm: {
        expressId: '', expressName: '', expressNo: '', orderId: ''
      },
      rules: {
        "expressId": [
          { required: true, message: '请选择物流公司', trigger: 'change' }
        ],
        "expressNum": [
          { required: true, message: '请输入物流单号', trigger: 'blur' }
        ]
      }
    }
  },
  created() {
    this.xianshi();
    this.shangpinlist();
    this.orderList(this.currentPage, this.pageSize);
    // this.expressList();
  },
  methods: {
    shangpinlist() {

      this.$api.integral.huoqushangpinlist({

      }).then(d => {
        if (d.code == 200) {
          this.shangpindata = d.data;
        }
      })
    },
    xianshi() {

      this.$api.integral.fanhuixianshi({

      }).then(d => {
        if (d.code == 200) {
          this.xianshidata = d.data;
        }
      })



    },
    //下载
    xiazai(id) {


      return this.importFileUrl + 'admin/integral/downloadBackOrder?orderId=' + id.orderId


    },
    expressList() {
      this.$api.payAdmin.expressList({ expressStatus: 1, current: 1, size: 10000 }).then(d => {
        if (d.code == 1) {
          this.expressListData = d.data;
        }
      }).catch(e => {
        console.log(e);
      })
    },
    search() {
      this.orderList(this.currentPage, this.pageSize);
    },
    orderList(cur, ss) {
      if (this.searchForm.date && this.searchForm.date.length == 2) {
        this.searchForm.beginTime = this.format(this.searchForm.date[0]);
        this.searchForm.endTime = this.format(this.searchForm.date[1]);
      }
      this.$api.integral.orderList(
        {
          current: cur,
          size: ss,
          // beginTime:this.searchForm.beginTime,
          // endTime:this.searchForm.endTime,
          orderNo: this.searchForm.orderNo,
          orderState: this.searchForm.orderState

        }
      ).then(d => {
        this.tableData = d.data;
        this.total = d.totalCount;


      }).catch(e => {
        console.log(e);
      })
    },
    goInfo(r) {
      this.$api.integral.orderInfo({ id: r.orderId }).then(d => {
        if (d.code == 200) {
          this.orderInfo = d.data;
          this.integralOrder = this.orderInfo.integralOrder;
          this.cjbintegralGoods = d.data.integralGoods;
          // this.cjbname=this.cjbintegralGoods.goodsName
          // console.log("=============================-----"+this.cjbintegralGoods.goodsName)

          this.dialogVisible = true;
        }
      }).catch(e => {
        console.log(e);
      })
    },
    orderShip() {
      this.dialogShipVisible = true
    },
    shipSub() {

      this.$api.integral.orderShip(
        {
          expressNum: this.expressNum,
          id: this.integralOrder.orderId,
          orderState: 2
        }

      ).then(d => {
        if (d.code == 200) {
          this.dialogShipVisible = false;
          this.dialogVisible = false;
          this.orderInfo.orderStatus = 3;
          this.$message({
            type: 'success',
            message: '操作成功!'
          });
          this.expressNum = "";
          this.orderList(this.currentPage, this.pageSize);
        } else {
          this.$message.error(d.msg);
        }
      }).catch(e => {
        console.log(e);
      })


    },
    handleReset() {
      this.searchForm = {
        orderNo: '',
        orderState: '',
      }
      this.endTimee = "",
        this.beginTimee = "",

        this.search();
    },
    comp(r) {
      this.$confirm('确认订单已完成?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        this.$api.integral.orderShip({
          id: r.orderId,
          orderState: 3
        }).then(d => {
          if (d.code == 200) {
            this.$message({
              type: 'success',
              message: '操作成功!'
            });
            this.orderList(this.currentPage, this.pageSize);
          } else {
            this.$message.error(d.msg);
          }
        }).catch((e) => {
          console.log(e);
        })
      });
    }
  }
}
</script>
<style scoped>
.top-box {
  width: 100%;

  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 80px;
}

.top-item {
  border: 1px rgb(189, 185, 185) solid;
  display: flex;
  justify-content: center;
  align-items: center;
  width: 50%;
  margin-right: 100px;
}
.top-icon {
  width: 30%;
  height: 30%;
  margin-right: 30px;
  margin-left: 30px;
}
.fontText {
  font-size: 20px;
}

.fontTop {
  font-size: 40px;
}
.f18 {
  font-size: 25px;
  font-weight: 700;
}
.mgb-20 {
  font-size: 16px;
}
</style>
